<template>
	<view>
		<nav-bar color="#000000" >关注</nav-bar>
		<view class="manage" @click="goTofollow">管理</view>
		<!-- 没有关注 -->
		<view class="section-1">
			<view class="img"><image src="../../static/image/follow/ZWGZ@3x.png" mode=""></image></view>
			<view class="text-1">你还没有关注任何内容哦~</view>
			<view class="text-2">你可以设置你想关注的内容</view>
			<view class="goTofollow" @click="goTofollow">前往关注</view>
		</view>
		<!-- 关注列表 -->
		<view class="section-2">
			<!-- 分段组件 -->
			<view>
				<!-- <uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" style-type="text" active-color="#FD6431"></uni-segmented-control>
				<view class="content">
					<view v-show="current === 0"><recommend></recommend></view>
					<view v-show="current === 1"><recommend></recommend></view>
					<view v-show="current === 2"><recommend></recommend></view>
					<view v-show="current === 3"><recommend></recommend></view>
				</view> -->
				<glance v-on:clickKeyword="clickKeyword" :data="keyList"></glance>
				<view class="demoList" v-for="(item, index) in keyList" :key="index">{{ item }}</view>
			</view>
		</view>
		<!-- 底部导航栏 -->
		<wyg-bottom-tab-withcenter tabIndex="2" :tabListParent="tabList"></wyg-bottom-tab-withcenter>
	</view>
</template>

<script>
import wygBottomTabWithcenter from '@/components/wyg-bottom-tab/wyg-bottom-tab-withcenter.vue'; //底部组件
import TAB_LIST from '../../static/wyg-bottom-tab/js/botoom-list2.js'; //底部组件js
import glance from '@/components/jm-glance/jm-glance.vue'; //分段组件
import recommend from '@/components/recommend';
export default {
	components: {
		wygBottomTabWithcenter,

		recommend,
		glance
	},
	data() {
		return {
			tabList: TAB_LIST, //底部栏数据
			current: 0,
			keyList: [
				{
					title: '全部',
					id: '1'
				},
				{
					title: '海边酒店',
					id: '2'
				},
				{
					title: '迪士尼',
					id: '3'
				},
				{
					title: '生鲜水果',
					id: '4'
				}
			]
		};
	},

	methods: {
		//跳转关注管理页
		goTofollow: function() {
			uni.navigateTo({
				url: './followManage'
			});
		},
		//分段器
		clickKeyword(e) {
			uni.showToast({
				title: '点击选项卡，id为：' + e.key + ',内容为：' + e.name,
				icon: 'none',
				duration: 2000
			});
			this.list = [];
			var arr = [e.name, e.name, e.name, e.name, e.name, e.name, e.name, e.name];
			this.list = arr;
		}
	}
};
</script>

<style lang="scss" scoped>
* {
	padding: 0;
	margin: 0;
	font-size: 0.75rem;
	box-sizing: border-box;
}
page {
	background: #ffffff;
	margin-bottom: 160rpx;
}
.manage {
	position: fixed;
	top: 20rpx;
	right: 20rpx;
	font-size: 32rpx;
	z-index: 1000000000 !important;
}

.section-1 {
	margin-top: 80rpx;
	display: flex;
	display: none; //没有关注隐藏
	flex-direction: column;
	align-items: center;
	justify-content: space-around;
	.img {
		width: 400rpx;
		height: 400rpx;
		margin: 200rpx auto 50rpx;
		image {
			width: 100%;
			height: 100%;
		}
	}
	.text-1 {
		color: #4e5366;
		margin-bottom: 10rpx;
	}
	.text-2 {
		color: #1d1e21;
		font-size: 32rpx;
		font-weight: bold;
	}
	.goTofollow {
		width: 80%;
		height: 90rpx;
		text-align: center;
		line-height: 90rpx;
		color: #ffffff;
		border-radius: 50rpx;
		font-size: 36rpx;
		margin: 50rpx auto;
		background: linear-gradient(to top, #fd6431, #ff9972);
	}
}
.section-2 {
	margin: 100rpx 0 0;
}
</style>
